// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options)


$('#btn').click(function () {
  $('#file').click();
})


$('#file').change(function (e) {
  //  e.target.files 
  // this.files 
  // console.log(this === e.target)
  if (e.target.files.length == 0) return layer.msg('请选择要上传的图片')
  //拿到这个图片，把它转换成一个内存中的路径
  var newImgURL = URL.createObjectURL(e.target.files[0])
  $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newImgURL)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
})


$('#save').click(function () {
  //拿到裁剪之后图片对应的数据(base64)
  var dataURL = $image
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 100,
      height: 100
    })
    .toDataURL('image/png')
  $.ajax({
    method: 'post',
    url: '/my/update/avatar',
    data: {
      avatar: dataURL
    },
    success: function (res) {
      if (res.status != 0) return layer.msg('头像更新失败')
      window.parent.getUserInfo()
    }
  })
})